<template>
    <div class="echart-part">
      <echart-title :title="para.title"></echart-title>

      <div :id="para.id" class="echart_content" style="">
        <div class="pie"  style="flex-basis: 20%;display: flex;flex-direction: column">
          <div style="flex-basis: 100%;position: relative">
            <div id="pieDiv" style="width: 100%;height: 100%;position: absolute;z-index: 2">

            </div>
            <div class="rotate" style="">
              <img src="../../../assets/images/large-screen/rotate.png" style="width: 100%" alt="">
            </div>

          </div>


        </div>
        <div class="bar" style="flex-grow: 1;display: flex;flex-direction: column">
          <div id="barDiv" style="flex-basis: 100%">
          </div>

        </div>
      </div>
    </div>
</template>
<script>
  const echarts = require("echarts");
  import echartTitle from '../common/echart-title'
  import {
    pieOption,
    barOption,
  } from "./echarts-option"
  let myChart_pie
  let myChart_bar
  export default {
    name: 'taskNum',
    props: {
      para: {}
    },
    components: {
      echartTitle
    },
    data() {
      return {
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        //大概率我们从后端拿到的接口是这样的，而且我们也建议是这样的
        let data={
          'diagnose':16000,
          'cure':15000
        }
        let arr_bar=[]
        let arr_pie=[]
        /*
        * 基础版*/
        _.forEach(data,(v,key)=>{
          let json_bar={}
          let json_pie={}
          json_bar.value = v;
          json_bar.name = key;
          arr_bar.push(json_bar)
          if(key=='diagnose'){
            json_pie.value=data['diagnose']-data['cure']
            json_pie.name='死亡'
          }else{
            json_pie.value=v
            json_pie.name='治愈'
          }
          arr_pie.push(json_pie)
        })
        /*
        * 进阶版-修改颜色，分为不同系列颜色设置、同系列颜色设置，
        * */
        // _.forEach(data,(v,key)=>{
        //   let json_bar={}
        //   let json_pie={}
        //   json_bar.value = v;
        //   json_bar.name = key;
        //   arr_bar.push(json_bar)
        //   if(key=='diagnose'){
        //     json_pie.value=data['diagnose']-data['cure']
        //     json_pie.name='死亡'
        //     json_pie.itemStyle={
        //       color: "rgba(218, 51, 51, 1)"
        //     }
        //   }else{
        //     json_pie.value=v
        //     json_pie.name='治愈'
        //     json_pie.itemStyle={
        //       color: "#73BF78"
        //     }
        //     json_bar.itemStyle={
        //       color: "#73BF78"
        //     }
        //   }
        //   arr_pie.push(json_pie)
        // })


        pieOption.series[0].data=arr_pie
        barOption.series[0].data=arr_bar

        this.draw();
      },
      draw() {
        let pieDiv = document.getElementById('pieDiv')
        let barDiv = document.getElementById('barDiv')
        if (!myChart_pie || !pieDiv.innerHTML) {
          myChart_pie = echarts.init(pieDiv);
        }
        if (!myChart_bar || !barDiv.innerHTML) {
          myChart_bar = echarts.init(barDiv);
        }

        myChart_pie.setOption(pieOption);
        myChart_bar.setOption(barOption);

        window.addEventListener("resize", () => myChart_pie.resize(), false);
        window.addEventListener("resize", () => myChart_bar.resize(), false);
        // echarts.connect([myChart_pie, myChart_bar]);

      },
    }
  }
</script>

<style scoped>


  .rotate {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    z-index: 1;
  }

  .rotate img {
    animation: myrotate 5s infinite linear;
  }

  @keyframes myrotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
